let path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const webpack = require('webpack');
const ary = ['index', 'other']
let obj = require('./mock/1.js')
function htmlP(ary = []) {
  return ary.map(item => {
    return new htmlWebpackPlugin({
      title:item,
      // script:'<script src=http://libs.baidu.com/jquery/2.0.0/jquery.min.js></script>',
      template: `./public/${item}.html`,
      filename: `${item}.html`,
      hash: true,
      chunks: [item]// 也就是说 index.html 中要引入 other.js
    })
  })
}
function entryFn(ary) {
  let obj = {};
  ary.forEach(item => {
    obj[item] = `./src/${item}.js`
  })
  return obj
}
// console.log(htmlP(ary))

module.exports = {
  optimization:{
    minimizer:[
      new OptimizeCssAssetsPlugin()
    ]
  },
  // externals: {
  //   jquery12: 'jQuery',
  //   jquery1: '$',

  // },
  mode: 'development',
  entry: {
    ...entryFn(ary)
  },
  output: {
    filename: '[name].[hash:5].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    // new webpack.ProvidePlugin({
    //   "$$$$$":'jquery' // 属性名是自己起的 属性值 是包的名字 
    // }),
    new CleanWebpackPlugin(),
    ...htmlP(ary),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[hash:5].css',
      chunkFilename:'css/[id].[hash:5].css'
    })
  ],
  module: {
    rules: [
      {
        test: require.resolve('jquery'),
        use:{
          loader: 'expose-loader',
          options: '$'
        }
        // ????  
      },
      {
        test: /\.css$/, // 匹配哪些文件(后缀是.css的文件 ) 加载css文件至少需要css-loader style-loader
        // 先用css-loader加载css文件 然后用style-loader扔到页面上
        // loader的加载顺序从右向左的 从下向上
        use: [{
          loader: MiniCssExtractPlugin.loader,
          options: {
            esModule: true,
          }
        }, {
          loader: 'css-loader',
          options: {
            importLoaders: 2,// 先去使用后边的加载器加载
          }
        }, 'postcss-loader', 'less-loader'] // 使用什么加载器 1 直接写字符串（适用于之需要一个loader）；2 数组 多个loader 3 {需要单独配置一个属性时}
      },
      {
        test: /\.less$/,
        // less首先要编译css还需要走css加载那一套
        use: [{
          loader: MiniCssExtractPlugin.loader,
          options: {
            esModule: true,
          }
        }, 'css-loader', 'postcss-loader', 'less-loader'],
        exclude: /node_modules/ // 不会去加载 node_modules中的less文件
      },
      // {
      //   test:/\.(jpg|jpeg|png|gif|webp|bmp)$/,
      //   // use:'file-loader' // 加载出来之后是一个hash名字
      //   use:{
      //     loader:'file-loader',
      //     options:{
      //       name:'imgs/[name].[ext]'
      //     }
      //   }
      // },
      {
        test:/\.(eot|woff|ttf|svg)$/,
        // use:'file-loader' // 加载出来之后是一个hash名字
        use:{
          loader:'file-loader',
          options:{
            name:'icon/[name].[ext]'
          }
        }
      },
      {
        test:/\.(jpg|jpeg|png|gif|webp|bmp)$/,
        use:{
          loader:'url-loader',
          options:{
            name:'imgs/[name].[ext]',
            // limit:100*1024, // 限制的意思 若图片的大小小于100kb 则自动转成base64  
            limit:10*1024,// 超过之后 会自动使用 file-loader进行加载
            // 所以 在使用url-loader的时候 需要把file-loader也装上
          }
        }
      },
      {
        test:/\.js$/,
        use:{
          loader:'babel-loader',
          
        },
        exclude:/node_modules/ // 不用去编译 node_modules中的JS文件
      },
      {
        test:/\.js$/,
        use:'eslint-loader',
        include:/src/,
        exclude:/node_modules/
      }
      
    ]
  },
  devServer: {
    // hot:true//它是热更新； 只更新改变的组件或者模块 不会整体刷新页面
    // proxy:{
    //   // 只能本地开发，上线的时候 这部分代码没用
    //   '/api':{
    //     // target:'https://api.bilibili.com',
    //     target:'http://localhost:3000',
    //     pathRewrite: {'^/api' : ''},
    //     // 前端请求的 /api/user ;其实 dev-server转接的时候 把 /api 提成了空 ；也就是 /api/user --> /user
    //     secure: false,// 若代理的地址式 https的需要有这个参数;若本地服务是https的 则值为true
    //     changeOrigin:false//将请求头中的 host改成服务器的域名
    //   }
    // }
    // proxy:{
    //   '/user':{
    //     // target:'https://api.bilibili.com',
    //     target:'http://localhost:3000',
    //     // pathRewrite: {'^/api' : ''},
    //     // 前端请求的 /api/user ;其实 dev-server转接的时候 把 /api 提成了空 ；也就是 /api/user --> /user
    //     secure: false,// 若代理的地址式 https的需要有这个参数;若本地服务是https的 则值为true
    //     changeOrigin:true//将请求头中的 host改成服务器的域名
    //   }
    // }
    before: function(app, server, compiler) {
      let ary = obj.get;
      ary.forEach(item=>{
        app.get(item.url,function(req, res){
          res.json(item.data);
        })
      })
      // app.get('/user', function(req, res) {
      //   res.json({ custom: 'response',qq:123 });
      // });
    }
  },
  devtool:'eval-cheap-module-source-map'
  // 可以把报错 映回到 打包之前的文件位置
  // 开发环境 eval-cheap-module-source-map'
  // 生产环境 cheap-module-source-map
}


/* 
  babel  是为了把高级JS语法 转成 低版本语法
  @babel/core
  babel-loader  把 babel和webpack进行一个链接
  @babel/preset-env  预设

*/
